<template>
		<view class="search" v-show="!leftAnimateB1"
		 :class="[{leftAnimateB:searchAnimate},{leftAnimateD:!searchAnimate}]">
			<view class="searchItem" v-for="item,index in searchList" :key="searchList.id"
			 @click="chooseBlog(item)">
			  {{item.title}}
			</view>
		</view>
</template>

<script>
export default {
	props:{
		searchList:{
			type:Array,
			default:[]
		},
		searchAnimate:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return{
			leftAnimateB1:true
		}
	},
	computed:{
		
	},
	methods:{
		chooseBlog(item){
			this.$emit("chooseBlogForSearch",item)
		}
	},
	watch:{
		searchAnimate(val,oldval){
				setTimeout(()=>{
					this.leftAnimateB1 = !val
				},200)
			
		}
		
	}
	
};
</script>

<style scoped lang="scss">
	.leftAnimateD{
		animation: leftGo .2s linear;
	}
	@keyframes leftGo{
		0%{
			left: 25px;
		}
		100%{
			left: -500px;
		}
	}
	.leftAnimateB{
		animation: Leftbound .6s ease-in-out;
	}
	@keyframes Leftbound {
	0%{
	  left: 800upx;
		}
		70%{
			left: -20px;
	}
	100%{
		left: 25px;
	}
	}
	.search {
		border-radius: 10px;
		box-sizing: border-box;
		position: fixed;
		background-color: #fff;
		padding: 10px;
		z-index: 9;
		.searchItem {
			line-height: 35px;
			padding: 0 5px;
			transition: all .3s;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:active{
				background-color: #ddd;
			}
		}
		&::before {
			content: '';
			position: absolute;
			top: -19px;
			border: 10px solid;
			border-color: transparent transparent #fff;
		}
	}
</style>
